<template>
  <div>
    <kendoForm
      :kendo-form-items="forms.kendoFormItems"
      :kendo-form="forms.kendoForm"
      :kendo-params-value="forms.kendoParamsValue"
    />
    <KendoGridCmpt
      ref="fileGrid"
      :table-grid-option="tableGridOption"
      :table-grid-data-source-option="tableGridDataSourceOption"
      :table-grid-toolbar="tableGridToolbar"
      @persistSelection="selectDataItems"
    />
  </div>
</template>

<script>
  import kendoForm from '@/Views/components/kendo-vue-component/kendoForm/index.vue'
  export default {
    name: '',
    components: {
      kendoForm
    },
    data() {
      return {
        forms: {},
        dirforms: {
          kendoFormItems: [
            {
              name: 'directoryNo',
              label: '文件目录编号',
              paramName: 'directoryNo',
              disabled: true,
              readonly: true,
              controlType: 'input'
            },
            {
              name: 'directoryName',
              label: '文件目录名称',
              paramName: 'directoryName',
              disabled: true,
              controlType: 'input'
            },
            {
              name: 'parentDirectoryNo',
              label: '上级文件目录编号',
              paramName: 'parentDirectoryNo',
              disabled: true,
              controlType: 'input'
            },
            {
              name: 'directoryHier',
              label: '文件目录层级编码',
              paramName: 'directoryHier',
              disabled: true,
              controlType: 'input'
            },
            {
              name: 'directoryHierName',
              label: '文件目录层级名称',
              paramName: 'directoryHierName',
              disabled: true,
              controlType: 'input'
            }
          ],
          kendoForm: {
            ref: 'prodForm',
            valid: 'valid'
          },
          kendoParamsValue: {
            id: '',
            directoryNo: '',
            directoryName: '',
            parentDirectoryNo: '',
            directoryHier: '',
            directoryHierName: ''
          }
        },
        fileforms: {
          kendoFormItems: [
            {
              name: 'relBusiNo',
              label: '关联业务',
              paramName: 'relBusiNo',
              required: true,
              controlType: 'multicolumncombobox',
              // change: this.devInChargeChange,
              dataSource: 'PrjReqTaskDataSource',
              dataType: 'json',
              transportReadUrl: '/service/prjMng/reqmntTaskMng/findReqMntTaskList',
              dataMapping: {
                label: 'reqName',
                value: 'reqNo'
              },
              schema: {
                data: function(response) {
                  if (typeof response.data === 'object') {
                    if (JSON.stringify(response.data) === '{}') {
                      return []
                    }
                  }
                  return response.data
                }
              },
              column: [
                {
                  field: 'reqNo',
                  title: '需求编号',
                  width: 180
                },
                {
                  field: 'reqName',
                  title: '需求名称',
                  width: 320
                }
              ]
            },
            {
              ref: 'REL_BUSI_TYPE_CD',
              remoteData: true,
              cascade: true,
              name: 'relBusiType',
              label: '关联业务类型',
              paramName: 'relBusiType',
              optionLabel: '--请选择--',
              controlType: 'dropDownList',
              filter: 'contains',
              dataType: 'json',
              transportReadUrl: '/service/sysMng/dict/findDictByTypeWithForm',
              readonly: true,
              autoBind: true,
              schema: {
                data: function(response) {
                  return response.data
                }
              },
              dataMapping: {
                label: 'dictValNm',
                value: 'dictVal'
              },
              parameterMap: function(options, operation) {
                if (operation !== 'read' && options.models) {
                  // eslint-disable-next-line no-undef
                  return { models: kendo.stringify(options.models) }
                } else {
                  // eslint-disable-next-line no-undef
                  return kendo.stringify({ dict: 'REL_BUSI_TYPE_CD' })
                }
              }
            },
            {
              name: 'relFileDirName',
              label: '所属文件夹名称',
              paramName: 'relFileDirName',
              disabled: true,
              controlType: 'input'
            },
            {
              label: '文件上传',
              ref: 'materialUpload',
              genre: 'special',
              controlType: 'upload',
              paramName: 'files',
              disabled: true,
              multiple: true,
              asyncSaveUrl: '/service/decoration/commonUploadFiles',
              asyncRemoveUrl: '/service/decoration/commonRemoveFiles'
            }
          ],
          kendoForm: {
            ref: 'prodForm',
            valid: 'valid'
          },
          kendoParamsValue: {
            id: '',
            relBusiNo: '',
            relFileDirNo: '',
            relFileDirName: '',
            files: [],
            relBusiType: ''
          }
        },
        /* Form end*/
        /* Grid start*/
        tableGridToolbar: [
          {
            text: '下载文件',
            class: 'k-primary',
            icon: 'download',
            option: {
              /** @Description
                 模式 ：dataReq:数据操作，请求后台处理 dataView 数据操作，请求前端页面渲染视图
                 model: 'dataReq',
                 如果是dataReq 那么必须要有 :{
                  transportRequestUrl: ''(请求地址)
                  parameterMap (请求参数)
                 }
              */
              model: 'export',
              transportRequestUrl: '/service/decoration/commonDownLoadFiles',
              parameterMap: { isOnLine: false }
            },
            /**
             * @description 操作类型 add (新增) update(修改) del(删除) view(查看)
            */
            operatorType: 'add'
          }
        ],
        tableGridOption: {
          ref: 'fileOptGrid',
          dataSourceRef: 'fileDataSource',
          remoteData: true,
          sortable: true,
          reorderable: true,
          resizable: true,
          pageable: true,
          selectSingle: true,
          selectMultiple: false,
          columns: [
            { field: 'relBusiNo', title: '关联业务编号', dictData: 'REL_BUSI_NO_CD', width: 150 },
            { field: 'fileName', title: '文件名称', width: 420 },
            { field: 'fileSize', title: '文件大小', width: 120 },
            { field: 'relFileDirNo', title: '所属文件目录编号', width: 180 },
            { field: 'relFileDirName', title: '所属文件目录名称', width: 320 },
            { field: 'fileExtensionName', title: '文件扩展名', width: 100 },
            { field: 'relBusiType', title: '关联业务类型', dictData: 'REL_BUSI_TYPE_CD', width: 100 }
          ]
        },
        tableGridDataSourceOption: {
          ref: 'fileDataSource',
          type: 'json',
          pageSize: 10,
          transportReadUrl: '/service/prjMng/reqmntDocMng/findReqmntDocPage',
          serverPaging: true,
          dict: ['REL_BUSI_TYPE_CD'],
          remoteTransData: {
            REL_BUSI_NO_CD: {
              transportName: 'reqmntTaskServiceImpl',
              transportMethod: 'reqTaskNoTransDict',
              transportParam: {}
            }
          },
          params: {},
          schema: {
            model: {
              id: 'id',
              fields: {
                relBusiNo: { editable: false, type: 'string' },
                fileName: { editable: false, type: 'string' },
                fileSize: { editable: false, type: 'string' },
                relFileDirNo: { editable: false, type: 'string' },
                relFileDirName: { editable: false, type: 'string' },
                fileExtensionName: { editable: false, type: 'string' },
                relBusiType: { editable: false, type: 'string' }
              }
            },
            data: function(response) {
              return response.data.list
            },
            total: function(response) {
              return response.data.total
            }
          }
        },
        selectData: []
        /* Grid end */
      }
    },
    mounted() {
      const param = this.$attrs.data.param
      if (param.flag) {
        this.dirforms.kendoParamsValue = Object.assign(this.dirforms.kendoParamsValue, param)
        this.forms = this.dirforms
      } else {
        this.fileforms.kendoParamsValue = Object.assign(this.fileforms.kendoParamsValue, param)
        this.forms = this.fileforms
      }
      this.tableGridDataSourceOption.params = Object.assign(this.tableGridDataSourceOption.params, param)
    },
    methods: {
      selectDataItems(res) {
        this.selectData = res
      }
    }
  }
</script>

<style>

</style>
